<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrap {
            width: 1072px;
            height: 400px;
            margin: 50px auto;
        }

        #wrap img{
            float: left;
            border: 1px solid black;
            margin-right: 20px;
        }

        #top {
            float: left;
            width: 600px;
            height: 220px;
            border-bottom: 1px solid #bbb;
            font-family: 'Microsoft yahei';
        }

        #top p span {
            font-size: 14px;
            color: #666;
            border: 1px solid #999;
            display: inline-block;
            padding: 8px;
            cursor: pointer;
        }

        #top p span.on {
            border: 2px solid #f60;
            padding: 7px;
            background: url(images/on.png) no-repeat right bottom;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <img src="images/black.jpg" alt="">
        <div id="top">
            <p id="color">
                <label class="">颜色</label>
                <span class="on">黑色</span>
                <span class="">白色</span>
                <span class="">红色</span>
                <span class="">黄色</span>
                <span class="">紫色</span>
                <span class="">绿色</span>
            </p>
            <p id="rom">
                <label class="">内存</label>
                <span class="on">64GB</span>
                <span class="">128GB</span>
                <span class="">256GB</span>
            </p>
            <p id="banben">
                <label>版本</label>
                <span class="on">全网通</span>
                <span>移动版</span>
                <span>联通版</span>
                <span>电信版</span>
            </p>
        </div>
        <div id="bottom">
            <p>价格： <label>￥ <span id="price">6888</span>.00</label>
                <button>立即购买</button>
        </div>
    </div>


    <script>
        let imgArr = 
            ['images/black.jpg',
            'images/white.jpg',
            'images/red.jpg',
            'images/yellow.jpg',
            'images/purple.jpg',
            'images/green.jpg'
          ];

      let btn_color = document.querySelectorAll('#color > span');
      let img = document.querySelector('#wrap > img');
      let btn_rom = document.querySelectorAll('#rom > span');
      let price = document.querySelector('#price');
      let btn_banben = document.querySelectorAll('#banben > span');

      // 颜色切换
      for(let i = 0; i < btn_color.length; i++){
        btn_color[i].onclick = function(){
          document.querySelector('#color >span.on ').classList.remove('on');
          this.classList.add('on');
          img.src = imgArr[i];
        }
      }

      // rom内存
      for(let i = 0; i < btn_rom.length; i++){
        btn_rom[i].onclick = function(){
          document.querySelector('#rom >span.on ').classList.remove('on');
          this.classList.add('on');
          price.innerHTML = 6888 + 1000*i;
        }
      }
      // 版本
      for(let i = 0; i < btn_banben.length; i++){
        btn_banben[i].onclick = function(){
          document.querySelector('#banben >span.on ').classList.remove('on');
          this.classList.add('on');

        }
      }


      
    </script>
</body>

</html>